<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id" @click="$router.push(`/detail/${item.id}`)"> 
        <div class="itemImg">
          <img :src="item.image" alt="">
        </div>
        <div class="itemInfo">
          <p>{{item.title}}</p>
          <p style="color:red">￥{{item.price}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import request from "@/utlis/request.js";
import { onMounted, ref } from "vue";
const list = ref([]);
onMounted(() => {
  request
    .get("/list", {
      params: {
        pagination: 1,
        pageNum: 20
      }
    })
    .then(res => {
        if(res.data.code==200)
        {
            list.value=res.data.data
        }
    });
});
</script>
<style lang='scss' scoped>
ul{
  column-count: 2;
  column-gap: 10px;
  li{
    break-inside: avoid;
    .itemImg{
        img{
            width: 100%;
        }
    }
    .itemInfo{
        padding: 2px 8px;
    }
  }
}
</style>